{include file='common/head'}
<script>
    document.title = "积分商城 | {:config('system.base.title')} "
</script>
<style>
    .shop-navbar {
        background-color: #fff;
    }

    .shop-header {
        background-color: rgba(249, 68, 127);
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .shop-header .action {
        width: 60%;
        line-height: 30px;
        border: 1px solid #eee;
        border-radius: 12px;
        margin: 14px 0;
        text-align: center;
    }
    .shop-header .action .item:hover{
        background-color: rgb(161, 37, 78);
        border-radius: 12px;
    }
    .shop-header .action a {
        display: block;
        color: #fff;
        font-size: 12px;
    }

    .shop-header .action .layui-col-xs4:not(:last-child) {
        box-sizing: border-box;
        border-right: 1px solid #eee;
    }

    .score {
        color: #fff;
        margin: 5px 0;
    }

    .goods-list {
        padding: 5px;
    }

    .goods-list li {
        border: 1px dotted #eee;
        margin: 5px;
        padding: 10px;
    }

    .goods-list li p {
        float: left;
    }

    .goods-list li>button {
        float: right;
        font-size: 14px;
        color: rgba(254, 141, 111);
        margin-top: 20px;
        cursor: pointer;
    }

    .cate-list {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4px;
    }

    .cate-list li {
        line-height: 30px;
        margin-right: 10px;
        padding: 0 10px;
        /* border: 1px dotted rgba(254, 141, 111); */
        border: 1px solid rgba(249, 68, 127);
        cursor: pointer;
    }

    .cate-list li a {
        color: #777;
    }

    .cate-list li:hover {
        background-color: rgba(249, 68, 127);
    }

    .cate-list li:hover a {
        color: #fff;
    }
</style>
<div class="layout">
    <span class="layui-breadcrumb">
        <a href="{:url('/index/index/index')}">首页</a>
        <a><cite>积分商城</cite></a>
    </span>
    <div class="shop-navbar">
        <div class="shop-header">
            <span class="score layui-font-24">积分商城</span>
            <span class="score layui-font-14">我的积分：{$userData.profile.score}</span>
            <div class="action layui-row">
                <div class="layui-col-xs4 item">
                    <a href="javascript:" id="lender">获得积分</a>
                </div>
                <div class="layui-col-xs4 item">
                    <a href="{:url('/index/shop/score')}">积分充值</a>
                </div>
                <div class="layui-col-xs4 item">
                    <a href="javascript:">待添加~</a>
                </div>
            </div>
        </div>
        <div class="cate-list">
            <li><a href="{:url('/index/shop/index')}" class="layui-font-14">全部</a></li>
            {volist name="cate" id="cate"}
            <li><a href="{:url('/index/shop/index',['cid' => $cate.cid])}" class="layui-font-14 ">{$cate.cname}</a></li>
            {/volist}
        </div>
        <ul class="goods-list">
            {if $goods}
            {volist name="goods" id="goods"}
            <li class="layui-clear">
                <p>
                    <span class="layui-font-15 layui-font-red">{$goods.good_name}</span>
                    <br>
                    <span class="layui-font-12 layui-font-gray">{$goods.description}</span>
                    <br>
                    <span class="layui-badge-rim">{$goods.category.cname} </span>
                    <span class="layui-badge-rim">库存 {$goods.stock}</span>
                    <span class="layui-font-orange layui-font-12">{$goods.score} 积分</span>
                </p>
                <button class="layui-btn layui-btn-xs layui-bg-orange buy" data-score="{$goods.score}"
                    data-gname="{$goods.good_name}" data-id="{$goods.id}" type="button">立即兑换</button>
            </li>
            {/volist}
            {else/}
            <span>暂无商品</span>
            {/if}

        </ul>
    </div>
    
</div>
</div>
{include file='common/bottom'}
<script>
    layui.use(function () {
        const form = layui.form
        $ = layui.$
        const layer = layui.layer

    })
    let btn = $('.cate-list li')
    let active
    for (let i = 0; i < btn.length; i++) {
        active = btn[i]
        if (active.innerText == "{$cateName}") {
            active.style.backgroundColor = "rgba(249, 68, 127)"
            $(active).children()[0].style.color = '#fff'
        }
    }
    $('#lender').click(() => {
        layer.confirm('每天可以通过签到得到积分哦！<br>Ps：持续的签到奖励更丰厚哦！', {
            btn: ['立即签到', '取消']
        }, function () {
            $.get('/index/index/sign', (res) => {
                if (res.code == 200) {
                    layer.msg('签到成功')
                    $(this).removeClass('layui-bg-blue')
                    $(this).addClass('layui-bg-primary')
                    $(this)[0].innerHTML = '今日已签到'
                } else {
                    layer.msg('签到失败：' + res.message)
                }
            }, 'json')
        })
    })
    $('.buy').click(function () {
        let goodId = $(this).data('id')
        let good_name = $(this).data('gname')
        let score = $(this).data('score')
        layer.confirm(`确定要兑换【${good_name}】吗？${score}积分`, () => {
            $.post('/index/shop/pay', { id: goodId }, (res) => {
                if (res.code == 200) {
                    layer.msg(res.data, { icon: 6 })
                } else {
                    layer.msg(res.message, { icon: 5, time: 1200 })
                }
            })
        })
    })
</script>